body{
  margin: 15px;
  font-family: sans-serif;
  background-color: #f0f8ff;
}

.btn {
  border: 2px solid var(--color, black);
  background-color: white;
  font-size: 1em;
  line-height: 2em;
  border-radius: 2px;
  margin-bottom: 5px;
  text-align: center;
}
.btn:hover{
  cursor: pointer;
  background-color: var(--color, black);
  color: white;
}
.btn.red {
  --color: red;
  /* background-color: red; */
}
.btn.yellow{
  --color: yellow;
  /* background-color: yellow; */
}
.btn.green{
  --color: green;
  /* background-color: green; */
}
.btn.orange{
  --color: orange;
  /* background-color: orange; */
}
.btn.teal{
  --color: teal;
  /* background-color: teal; */
}
